@import "funs.less";
@bg-btn-first: #0dd66c;
@bg-btn-first-click: #2bae57; // 按钮背景按压
@bg-btn-first-border: transparent;
//==========================================================reset=========================Start=====================
/* 清除内外边距 */

body,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
blockquote,
/* structural elements 结构元素 */

dl,
dt,
dd,
ul,
ol,
li,
/* list elements 列表元素 */

pre,
/* text formatting elements 文本格式元素 */

fieldset,
legend,
button,
input,
textarea,
/* form elements 表单元素 */

th,
td {
  /* table elements 表格元素 */
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 36px;
  /* 18px / 12px = 1.5 */
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 28px;
}

h4,
h5,
h6 {
  font-size: 100%;
}

address,
cite,
dfn,
em,
var,
i,
code,
kbd,
pre,
samp,
tt {
  font-style: normal;
}

/* 统一等宽字体 */

small {
  font-size: 24px;
}

/* 重置列表元素 */

ul,
ol {
  list-style: none;
}

/* 重置文本格式元素 */

a {
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

abbr[title],
acronym[title] {
  /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */
  border-bottom: 1px dotted;
  cursor: help;
}

q:before,
q:after {
  content: "";
}

/* 重置表格元素 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 重置 hr */

hr {
  border: none;
  height: 1px;
}

html,
body {
  -webkit-overflow-scrolling: touch;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  background-color: #f1f4f9;
  color: rgba(0, 0, 0, 0.9); //height: 100%; overflow: hidden;
  // 不许复制
  user-select: none;
  padding: 0;
  margin: 0;
  border: none; // http://f2ex.cn/css-property-touch-action/
  // iOS Safari only supports auto and manipulation.
  touch-action: manipulation; //overflow-y: scroll;
}

body {
  font-size: 24px;
  .-font-regular;
}

input,
textarea {
  .-placeholder;
  color: rgba(0, 0, 0, 0.9);
}

// :not([yen]) {}
*[yen] {
  .-font-regular;
}

*[num] {
  font-family: Helvetica;
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

// @font-face {
//   font-family: "iconfont";
//   src: url("..\\iconfont\\iconfont.eot");
//   src: url("..\\iconfont\\iconfont.eot?#iefix") format("embedded-opentype"),
//     url("..\\iconfont\\iconfont.woff") format("woff"),
//     url("..\\iconfont\\iconfont.ttf") format("truetype"),
//     url("..\\iconfont\\iconfont.svg#iconfont") format("svg");
// }

.iconfont {
  .-iconfont;
}

// 隐藏
.x-hide {
  overflow: hidden !important;
}

// 通用动画
.-rotate360-keyframes(rotate-360);

// ==========路由动画相关==========
.router {
  // 防止iphone 拉皮条后出现黑底
  // &-bg {
  //     display: none;
  //     pointer-events: none;
  //     position: fixed;
  //     background-color: #f1f4f9;
  //     // top: 0;
  //     height: 100%;
  //     bottom: 0;
  //     left: 0;
  //     right: 0;
  //     z-index: 1;
  // }
  // &-root {
  //     // 根路由
  //     position: absolute;
  //     left: 0;
  //     right: 0;
  //     top: 0;
  //     bottom: 0;
  //     overflow: visible;
  //     z-index: 102;
  // }
  &-first {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    padding-top: 0;
    bottom: 0;
    box-sizing: border-box;
    overflow: visible;
    background-color: #f1f4f9;
    // transform: translateX(30px);
  }
  &-child {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    padding-top: 0;
    box-sizing: border-box;
    overflow: visible;
    // transition: transform 0.3s ease-out, opacity 0.35s ease-in;
    z-index: 103;
    background-color: #edf0f5;
    &.anim-fixed {
      position: fixed;
      overflow: hidden;
    }
  }
  &-context {
    //min-height: 100%;
  }
}

// iphonex 适配
.root-iphonex {
  .router-first,
  .router-child {
    &:after {
      display: block;
      content: "";
      height: 60px;
      overflow: hidden;
    }
  }
  .iphonex-fixed-bottom {
    padding-bottom: 60px;
  }
  .iphonex-fixed-bottom-border {
    border-bottom: 60px solid #ffffff;
  }
  .iphonex-fixed-bottom-margin {
    margin-bottom: 60px;
  }
}

.transition {
  &-child {
    &-enter-active {
      will-change: transform;
      transition: transform 0.3s ease-out, opacity 0.35s ease-in;
      // overflow: hidden;
    }
    &-leave-active {
      will-change: transform;
      transition: transform 0.3s ease-out, opacity 0.35s ease-in;
      opacity: 0.5;
      transform: translateX(40px);
      z-index: 99999;
      .transition-none {
        display: none;
      }
      // overflow: hidden;
    }
    &-enter {
      opacity: 0.5;
      transform: translateX(40px);
    }
  }
  &-popup {
    &-enter,
    &-leave-active {
      opacity: 0;
    }
  }
  &-go {
    &-enter-active {
      will-change: transform;
      transition: transform 0.3s ease-out, opacity 0.35s ease-out;
    }
    &-enter {
      opacity: 0;
      transform: translateX(30px);
    }
    &-leave-active {
      will-change: transform;
      transition: transform 0.3s ease-out, opacity 0.35s ease-out;
      opacity: 0.2;
      transform: translateX(30px);
    }
  }
  &-back {
    &-enter {
      //opacity: 0;
      transform: translateX(-30px);
    }
    &-leave-active {
      //opacity: 0;
      transform: translateX(-30px);
    }
  } // 通用动画
  // 向上推动画
  &-topend {
    &-enter-active {
      will-change: transform;
      transition: transform 0.3s ease-out, opacity 0.35s ease-in;
    }
    &-enter {
      opacity: 0;
      transform: translateY(40px);
    }
  }
  // 动画 垂直滑出滑入
  &-yin {
    &-enter-active,
    &-leave-active {
      will-change: transform;
      // height: 0;
      transition: all 200ms ease-in-out;
      overflow: hidden;
    }
    &-enter,
    &-leave-to {
      // opacity: 0;
      // transform: translateY(-20px);
      max-height: 0 !important;
    }
  }
}

.transition-go-enter-active,
.transition-go-leave-active {
  overflow: hidden;
}
.transition-child-enter-active,
.transition-child-leave-active {
  overflow: hidden;
}

// ==========路由动画相关==========

// 需要替换公共组件中的样式，都可以下载下面 body下面，就可以覆盖
.root-app {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

// 一般用于顶部 提示框
.x-tip1 {
  display: block;
  background: #fefced;
  font-size: 24px;
  color: #f76a23;
  height: auto;
  line-height: 40px;
  padding: 10px 30px;
  word-break: break-all;
  a {
    color: #f76a23;
    text-decoration: none;
  }
}

// ============== 按钮 =======
.-xbtn(@bg,
@h,
@bg-act,
@b: transparent,
@color: #FFFFFF,
@size: 28px,
@rs: 12px) {
  .-btn(@bg, @h - 2, @bg-act, @size, @color);
  border: 1px solid @b;
  border-radius: @rs;
}

.x-btn1 {
  .-xbtn(@bg-btn-first, 60px, @bg-btn-first-click, @bg-btn-first-border);
}

.x-btn1-ex {
  .-xbtn(#ff613c, 60px, #ef5530, @bg-btn-first-border);
}

.x-btn2 {
  .-xbtn(
    fade(@bg-btn-first, 10%),
    60px,
    fade(@bg-btn-first, 20%),
    transparent,
    #0dd66c
  );
}

.x-btn3 {
  .-xbtn(#fff, 60px, #eee, transparent, #666666);
  border: none;
  margin: 0 1px;
  overflow: visible; //padding: 1px;
  border: 1px solid #cecece;
  border-radius: 12px;

  &[disabled]:after {
    display: none;
  }
  &[circle]:after {
    border-radius: 100px;
  }
}

.x-btn1-large {
  .-xbtn(
    @bg-btn-first,
    96px,
    @bg-btn-first-click,
    @bg-btn-first-border,
    #ffffff,
    36px
  );
  font-weight: bold;
  box-shadow: none;
}

.x-btn1-large[circle][disabled] {
  box-shadow: none;
}

.x-btn2-large {
  .-xbtn(#fff, 96px, #fff, #e9e9e9, rgba(0, 0, 0, 0.9), 36px);
}

div[class*=" x-btn"],
div[class^="x-btn"] {
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.x-align-left {
  text-align: left;
}

.x-font-first {
  color: #0dd66c;
}
.x-font-second {
  color: #ff613c;
}

/* layout flex布局 */
/* flex容器属性 开始 */
.flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}
/* 水平 */
/* 规定flex项目在水平方向上的对齐方式 */
.h-flex-start {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
}
.h-flex-center {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
.h-flex-end {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
/* 垂直 */
/* 规定flex项目在垂直方向上的对齐方式 */
.v-flex-start {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
.v-flex-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.v-flex-end {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
/* flex容器属性 结束 */
/* flex项目属性 开始 */
.flex1 {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.flex2 {
  -webkit-box-flex: 2;
  -webkit-flex: 2;
  flex: 2;
}
/* 规定flex项目自身在垂直方向上的对齐方式 */
/* 老版本不支持项目自身对齐 */
.v-self-start {
  -webkit-align-self: flex-start;
  align-self: flex-start;
}
.v-self-center {
  -webkit-align-self: center;
  align-self: center;
}
.v-self-end {
  -webkit-align-self: flex-end;
  align-self: flex-end;
}
/* flex项目属性 结束 */

/* 0.5像素边框，默认形状为实线 */
/* 核心代码 开始 */
.thin-border-all {
  border: 1px solid #eaeaea;
  box-sizing: border-box;
}
.thin-border-left {
  border-left: 1px solid #eaeaea;
  box-sizing: border-box;
}
.thin-border-right {
  border-right: 1px solid #eaeaea;
  box-sizing: border-box;
}
.thin-border-top {
  border-top: 1px solid #eaeaea;
  box-sizing: border-box;
}
.thin-border-bottom {
  border-bottom: 1px solid #eaeaea;
  box-sizing: border-box;
}
/* 核心代码 结束 */

/* 卡片布局，为了避免可能的margin collapse的情况出现，直接使用padding*/
.card-container {
  padding: 20px 20px 0;
}
.card-container .card-title {
  padding: 40px 0 20px 0;
  font-size: 40px;
  line-height: 1;
  font-weight: bold;
}
.card-container .card-content {
  padding: 0 30px;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
/* 卡片布局，为了避免可能的margin collapse的情况出现，直接使用padding*/
